[#ftl]
[@define "agile.form.DropDownButton" "agile.form.Button,agile._Container,agile._Resizable"]
	category:"DropDownButton Component"
	,widgetName:"DropDownButton"
	[#assign templateString][#compress]			
	<div class="agileComponent agile{widgetName}">
		<span data-dojo-attach-point="delegate" data-dojo-type="dijit.form.DropDownButton">
			<span>{parameters.label}</span>
			<div data-dojo-attach-point="delegateMenu" data-dojo-type="dijit.Menu"></div>
		</span>
		<div data-dojo-attach-point="editorNode" style="display:none;height:150px;width:250px" data-dojo-type="agile.dijit.Menu">
			[#--
			<table data-dojo-attach-point="editorLabelNode" >
				<tr>
					 <td style='width:10px;'><img class='dijitEditorIcon dijitEditorIcon{parameters.iconClass}' data-dojo-attach-point='iconNode'/></td>
					 <td style='width:120px'><div data-dojo-type='dijit.InlineEditBox' data-dojo-attach-point='label'>{parameters.label}</div></td>						
					 <td data-dojo-attach-point="arrowNode" >&lt;&nbsp;&lt;</td>
				</tr>
			</table>		
			<div data-dojo-attach-point="editorMenu,containerNode" style="height:125px;width:100%;border-top:1px solid"></div>
			--]
		</div>
	</div>
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"
	,resizeAxis:"y"	
	,sortAxis:"y"	
	,_getDelegatePrototype:function(){
		agile.requireX("dijit/Menu");
		agile.requireX("dijit/form.DropDownButton");
		agile.requireX("dijit/InlineEditBox");
		agile.requireX("dijit/Tooltip");
		return dijit.form.DropDownButton.prototype;
	}
	,constructor: function(){	
		
//		agile.requireX("dijit/Menu");
//		agile.requireX("dijit/form.DropDownButton");
//		agile.requireX("dijit/InlineEditBox");
//		agile.requireX("dijit/Tooltip");
		
		 //this.metadata("editorMenuParameters","{moveable:false}");
//		//console.log(this.declaredClass,"[agile.form.DropDownButton]:constructor....");
		
//		on(this,"showEditor",this,function(isVisible){				
//			if(!isVisible){				
//				var editorMenuInnerHTML = this.getInnerWidgetTemplate(true,0,"dojo");					
//				var div = construct.create("div",{innerHTML:editorMenuInnerHTML});					
//				parser.parse(div);
//				var editorMenu = registry.getEnclosingWidget(div.firstChild);
//				
//				array.forEach(this.delegateMenu.getChildren(),function(child){
//					this.delegateMenu.removeChild(child);
//				},this);
//									
//				array.forEach(editorMenu.getChildren(),function(child){
//					this.delegateMenu.addChild(child,"last");
//				},this);
//				
//				array.forEach(editorMenu.getChildren(),function(child){
//					editorMenu.removeChild(child);
//				},this);
//				
//				construct.destroy(editorMenu);
//				
//				////console.log("@@@@@@@@@@",this.metadata("label").length);
//				style.set(this.domNode,"width",this.style1("width") +"px");
//				//style.set(this.domNode,"width",this.metadata("label").length * 15);					
//			}
//			
//			if(isVisible){	
//				style.set(this.resizeHandle.domNode,"visibility","visible");
//			}else{
//				style.set(this.resizeHandle.domNode,"visibility","hidden");
//			}
//		});
	}
	,postCreate:function(){	
								
		if(agile.form.DropDownButton.prototype.editorTooltip == null){
			agile.form.DropDownButton.prototype.editorTooltip = new dijit.Tooltip({label: "Double click to hide the edit pane"});
		}
		agile.form.DropDownButton.prototype.editorTooltip.addTarget(this.arrowNode);
		
		this.own(on(this.arrowNode,"dblclick",lang.hitch(this,function(event){				
			this.showEditor(false);									
			event.stopPropagation();
		})));
		
		var child = new agile.dijit.MenuItem({parameters:{iconClass:'Paste',label:'Paste',accelKey:'Ctrl + P'}});
		this.addComponent(child,"last");
	}

	,getInnerWidgetTemplate:function(params){
		var template = "";			
		array.forEach(this.sortChildren(),function(child,index){
//				//console.log("child"+index,child.metadata("label"));
			template += child.toHtml(params);
		})

		if(params.sourceType == "dojo"){
			template = lang.replace("<div data-dojo-type='dijit.Menu'>{innerHTML} </div>",{innerHTML:template});
		}			
		return template;
	}
	,getResizableTargetContainer:function(){
		return this.domNode;
	}
	,getResizeHandleAnchorNode:function(){
		return this.domNode;
	}
[/@]
